<!--
 * @Description: 第三十八章（函数式编程，h函数）
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-23 11:22:19
-->
<template>

  <div>
    <h1>第三十八章（函数式编程，h函数）</h1>
    <div>
      <h2></h2>
      <div>
        <table border>
          <tr>
            <th>name</th>
            <th>age</th>
            <th>address</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in list" :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.address }}</td>
            <td>
              <Btn type="success">编辑</Btn>
              <Btn type="error">删除</Btn>
            </td>
          </tr>
        </table>

      </div>
    </div>
  </div>

</template>
<script setup lang="ts">
import { ref, reactive, h } from 'vue'

/*
1.template 模板书写风格
2.tsx编写风格
3.函数式组件 h函数
h函数的源码实际上是 createVnode
h函数的优点： 跳过了模板的编译
模板的编译过程： parser -> ast -> tranform -> js api -> generate -> render
比如 <div><span>1</span></div>实际会编译为：
let render () => {
  return h('div', {}, [
    h('span', {}, '1')
  ])
}
h函数的缺点：很多人接受不了 学习成本略高 vue3使用h函数较少
*/


let list = reactive([
  {
    id: 1,
    name: 'A',
    age: 10,
    address: '北京'
  },
  {
    id: 2,
    name: 'B',
    age: 20,
    address: '上海'
  },
  {
    id: 3,
    name: 'C',
    age: 30,
    address: '广州'
  },
  {
    id: 4,
    name: 'D',
    age: 40,
    address: '深圳'
  },
  {
    id: 5,
    name: 'E',
    age: 50,
    address: '澳门'
  },

])

interface Props {
  type:"success" | "error" | "warning"
}

const Btn = (props: Props, ctx:any) => {
  // 第一个参数是创建的节点
  // 第二个参数是节点的属性
  // 第三个参数是节点的内容

  // console.log('38th h button ctx: ', ctx);


  return h('button', {
    style: {
      color: props.type === 'success' ? "green" : "red"
    },
    onClick: () => {
    // console.log('38th h button onclick');
    // ctx.emit('click', 123123)
    if (props.type === 'success') {
      console.log('38th h button onclick 编辑')
    } else {
      console.log('38th h button onclick 删除')
    }

  }}, ctx.slots.default())
}

</script>
<style scoped></style>
